<template>
	<div id="all">
		<div id="left">
			<el-tabs @tab-change="TABCHANGE" tab-position="left">
				<el-tab-pane v-for="item in classList" :key="item.id" :label="item.name">
				<el-table ref="multipleTable" :data="item.exps" tooltip-effect="dark" style="width: 100%; margin-top: -40px"
					@selection-change="handleSelectionChange(item.exps, item.id)">
					<el-table-column type="selection" width="100" @select="handleSelect(scope.row)"></el-table-column>
					<el-table-column label="学生" width="520" style="font-size: 20px">
						<template v-slot="scope">{{ scope.row.name }}</template>
						<!-- <router-view></router-view> -->
					</el-table-column>
				</el-table>

				<div style="margin-top: 20px">
					<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">全选</el-button> -->
					<el-button type="primary" @click="publish(tableData)">发布</el-button>
				</div>
				<!-- </el-checkbox> -->
			</el-tab-pane>
			</el-tabs>
			
		</div>
		<div id="right">
			<h4>导入学生目录</h4>
			<el-upload   
			action="#" 
			:on-preview="handlePreview"
				:on-remove="handleRemove"  
				:on-exceed="handleExceed" 
				:on-change="changeFile"
				accept=".xlsx, .xls"
				:limit="1" 
				:auto-upload="false" 
				:data="cid"
				>
				<template #trigger>
					<el-button type="primary">点击此处选择文件</el-button>
				</template>
				<el-button type="success" @click="UpdateFile" class="upload">上传</el-button>
				<template #tip>
					<div class="el-upload__tip">
						文件大小不能超过1MB.
					</div>
				</template>
			</el-upload>
		</div>
	</div>
</template>

<script setup lang="ts">
//@ts-nocheck
import { getStudent, postEx, uploadFile } from '@/api/request'
import { ref } from 'vue'
// 引入路由
import { useRoute } from 'vue-router'
// import router from '~/src/router'
const route = useRoute()
const jwtToken = localStorage.getItem('jwtToken')
const File = ref()//保存文件
const classList = ref([
	{
		id: 3,
		name: '液体粘滞系数的测定',
		exps: [
			{ id: 1, name: '学生1', state: 0 },
			{ id: 2, name: '学生2', state: 1 },
			{ id: 3, name: '学生3', state: 1 },
		],
	},
	{
		id: 10,
		name: '密立根油滴实验',
		exps: [
			{ id: 1, name: '学生1', state: 0 },
			{ id: 2, name: '学生1', state: 1 },
			{ id: 3, name: '学生1', state: 1 },
			{ id: 4, name: '学生1', state: 1 },
		],
	},
	{
		id: 15,
		name: '用牛顿环仪测量透镜的曲率半径',
		exps: [
			{ id: 1, name: '学生2', state: 0 },
			{ id: 2, name: '学生2', state: 1 },
			{ id: 3, name: '学生2', state: 1 },
			{ id: 4, name: '学生2', state: 1 },
		],
	},
	{
		id: 16,
		name: '迈克尔逊干涉仪的调节与使用',
		exps: [
			{ id: 1, name: '学生2', state: 0 },
			{ id: 2, name: '学生2', state: 1 },
			{ id: 3, name: '学生2', state: 1 },
			{ id: 4, name: '学生2', state: 1 },
		],
	},
])
const cid = route.query.cid//这是为了拼接文件，一并上传
// 返回的学生数据
const result = ref([])
// 查询班级的学生

const changeFile = (file) => {
	File.value = file
}
const TABCHANGE=(TabsPaneContext,)=>{
	console.log("tabchange");
	
}
//文件发生改变时，获取文件
onMounted(() => {
	
	const cid = route.query.cid
	console.log("cid", route.query.cid)
	// console.log(router)
	getStudent(jwtToken, cid).then((res) => {
		console.log(res, '返回的学生数据')
		// console.log(res, '返回的数据')
		result.value = res.data.data

		// 处理result的数据
		result.value = result.value.map((item) => ({
			sid: item.sid,
			cid: item.cid,
			name: item.name,
			updateTime: item.updateTime,
			state: 0,
			eid: '',
		}))
		console.log('处理后的result', result.value)
		// 处理classList的数据
		classList.value = classList.value.map((classInfo) => ({
			id: classInfo.id,
			name: classInfo.name,
			exps: result.value,
			state: '0',
		}))
	})
})
 const UpdateFile = () => {
	//console.log(uploadRef)          
	let formData = new FormData();
	let data={
		'cid':cid,
		'file':File.value.raw
	}
	formData.append("cid", cid)
	formData.append("file", File.value.raw)
	console.log(formData.get("cid"),data);
	uploadFile(jwtToken,formData).then((res) => {
		console.log("文件上传结果：", res);
		if (res.code == 200) {
			location.reload()
			ElMessage({
				message: '上传成功',
				type: 'success',
				
			})
		}
		else{
			ElMessage.error('文件上传失败')
		}
	})
}//文件上传
const handleExceed=()=>{
	ElMessage.error('一次只能上传一个文件')
}
const handleSelect = (scope) => {
	 console.log(scope, '点击')
}
// 点击勾选
//点击的学生数组
const selected = ref([])
// 最后要传递的包含三个id的对象
const data = ref({
	cid: '',
	eid: '',
	sids: [],
})
const handleSelectionChange = (scope, id) => {
	console.log(scope, '点击')
	scope[0].eid = id
	selected.value.push(scope)
	// console.log(scope, '点击', id, 'iddd')
	// console.log(scope[0], '123')
	// console.log(selected.value, '点击的选项')

	// selected.value = selected.value.map((item) => ({
	// 	sid: item[0].sid,
	// 	cid: item[0].cid,
	// 	eid: item[0].eid,
	// }))
	for (let index = 0; index < selected.value.length; index++) {
		selected.value[index] = selected.value[index].map((item) => ({
			sid: item.sid,
			cid: item.cid,
			eid: item.eid,
		}))
	}
	data.value.cid = selected.value[0][0].cid
	// data.value.sid = selected.value.map((item) => item[0].sid)
	for (let index = 0; index < selected.value.length; index++) {
		selected.value[index].forEach((element) => {
			data.value.sids.push(element.sid)
		})
	}
	// 对数组data.value.sid去重
	data.value.sids = [...new Set(data.value.sids)]
	data.value.eid = selected.value[0][0].eid
	// console.log(selected.value, '处理后的value')
	console.log(data.value, '处理后的data')
}
// 发布实验
const publish = (row) => {
	// console.log(row.value)
	const jwtToken = localStorage.getItem('jwtToken')
	postEx(jwtToken, data.value).then((res) => {
		console.log(res, '发布返回的结果')
	})
	ElMessage.success('发布成功')
}
// 选框状态
const checked = ref(true)
</script>

<style lang="scss" scoped>
#all {
	display: flex;
	justify-content: space-between;

	#left {
		width: 500px;
		margin-right: 30px;
	}
	#right {
		.upload 
		{
			margin-left: 10px;
			margin-top: 8px;
		}
	}
}
</style>